<template>
  <div>
    <el-dialog
      :title="$attrs.title"
      :visible.sync="dialogFormVisible"
      @close="handleClose"
    >
      <el-form :model="form">
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input v-model="form.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth">
          <el-select v-model="form.depa" placeholder="请选择部门">
            <el-option label="电商部" value="电商部"></el-option>
            <el-option label="客服部" value="客服部"></el-option>
            <el-option label="仓库部" value="仓库部"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-select v-model="form.role" placeholder="请选择角色">
            <el-option label="管理员" value="管理员"></el-option>
            <el-option label="子账号" value="子账号"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleConfirm"
          :loading="isConfirmLoading"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { userList } from "@/mockApi/homepage/MockUserList";
import _ from "lodash";
export default {
  name: "FormDialog",
  components: {},
  props: {
    toggle: {
      type: Boolean,
      required: true,
    },
    userData: {
      type: Object,
      // default 默认值若为 复杂类型，则 default 必须为 函数
      default() {
        return {};
      },
    },
  },
  computed: {
    // 判断是否为编辑状态
    isEdit() {
      return !_.isEmpty(this.userData);
    },
  },
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "100px",
      isConfirmLoading: false,
      form: {
        nickname: "",
        phone: "",
        email: "",
        depa: "",
        role: "",
      },
    };
  },
  methods: {
    // 点击关闭按钮，关闭弹窗
    handleClose() {
      this.$emit("closeDialog");
      // 只要 Dialog 被关闭，则 清空 From 中的数据
      this.form = {
        nickname: "",
        phone: "",
        email: "",
        depa: "",
        role: "",
      };
    },
    // 点击确定按钮，接口提交表单
    handleConfirm() {
      console.log(this.isEdit);
      if (this.isEdit) {
        this.ajaxEdituser();
      } else {
        this.ajaxAdduser();
      }
    },
    // 编辑用户
    ajaxEdituser() {
      this.isConfirmLoading = true;
      userList
        .set(this.form.id, this.form)
        .then((res) => {
          console.log(res);
          if (res.status === "success") {
            this.$message.success("编辑成功");
          }
          setTimeout(() => {
            this.$emit("updateTable");
          }, 1000);
        })
        .catch((err) => {
          this.$message.error("编辑失败:" + err);
        })
        .finally(() => {
          this.dialogFormVisible = false;
          this.isConfirmLoading = false;
        });
    },
    ajaxAdduser() {
      this.isConfirmLoading = true; // 确定按钮，开始 转圈圈
      // 即向后台，增加 用户 输入的 表单数据
      console.log(this.form, "this.form");
      userList
        .append(this.form)
        .then((res) => {
          console.log("user.append", res);
          if (res.status === "success") {
            this.$message.success(`数据提交成功`);

            // 1S之后，为您刷新table`
            setTimeout(() => {
              // this.refreshTable();
              this.$emit("updateTable");
            }, 1000);
          }
        })
        .finally(() => {
          this.dialogFormVisible = false;
          this.isConfirmLoading = false;
        });
    },
  },
  watch: {
    toggle(newvalue) {
      this.dialogFormVisible = newvalue;
      if (this.isEdit) {
        this.form = _.cloneDeep(this.userData);
      }
    },
    // userData(newvalue) {
    //   this.form = _.cloneDeep(newvalue);
    // },
  },
};
</script>

<style scoped lang="scss"></style>
